<template>
    <div>
        <el-button type="primary">添加</el-button><el-button type="primary">保存</el-button>
        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" lazy :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="sort" label="分类名称" sortable>
                <template #default="scope">
                    <el-input class="text" size="small" v-model="scope.row.data" placeholder="请输入地区"
                        :minlength="2" />(ID:{{ scope.row.id }})
                </template>
            </el-table-column>
            <el-table-column prop="name" label="别名" />
            <el-table-column prop="sort" label="排序">
                <template #default="scope">
                    <el-input class="text" size="small" v-model="scope.row.sort" />
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="add(scope.$index, scope.row)">此类下添加子类</el-button>
                    <el-button size="small" type="primary">编辑</el-button>
                    <el-button size="small" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script  setup>

const load = (row,treeNode,resolve) => {
    resolve([])
}
const tableData = [
    {
        id: 1,
        data: '深圳',
        name: 'bei',
        sort: 0,
        children: [
            {
                id: '1-1',
                data: '合肥',
                name: 'aaaaa',
                sort: 0,
                children: [
                    {
                        id: "1-1-1",
                        data: '瑶海区',
                        name: 'aaaa',
                        sort: 0,
                    }
                ]
            },
        ],
    },
    {
        id: 0,
        data: '上海',
        name: 'bei',
        sort: 1,

    }
]
let add = (i) => {
    console.log(i);
}
let del = (i) => {
    console.log(i);
}
</script>
<style scoped lang="less">
.text {
    width: 20%;
}
</style>